<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view v-if="!isNull">
				<view class="increment_info_a" v-if="!video_url">
					<product-swiper height="420" :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper>
				</view>
				<view class="video_a" :style="'top:'+CustomBar+'px'" v-if="video_url">
					<video
						id="myVideo"
						:controls="true"
						:http-cache="true"
						:page-gesture="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="true"
						object-fit="cover"
						:src="video_url"
						>
					</video>
				</view>
				<view style="width: 750rpx;height:420rpx;" v-if="video_url"></view>
				<view class="increment_info_b">
					<view class="increment_info_b_a" v-if="goodsDetail.integral==0 && goodsDetail.price==0">
						<view class="increment_info_b_a_a">免费</view>
						<view class="increment_info_b_a_b">
							{{goodsDetail.name}}
							<span class="increment_info_b_a_c" :class="item.course_type==2?'increment_info_b_a_cc':''">{{goodsDetail.course_type==1?'视频课程':'线下课程'}}</span>
						</view>
						<button open-type="share" class="increment_info_b_a_d">
							<view class="increment_info_b_a_d_a">
								<u-icon name="share" color="#666666" size="20"></u-icon>
							</view>
							<view class="increment_info_b_a_d_b">分享</view>
						</button>
					</view>
					<view class="increment_info_b_a" v-if="goodsDetail.integral>0 || goodsDetail.price>0">
						<view class="increment_info_b_a_b" style="width: 100%;margin-left: 0;float:none">
							{{goodsDetail.name}}
							<span class="increment_info_b_a_c" :class="item.course_type==2?'increment_info_b_a_cc':''">{{goodsDetail.course_type==1?'视频课程':'线下课程'}}</span>
						</view>
						<view class="increment_info_b_a_e">
							<view class="increment_info_b_a_e_a" v-if="goodsDetail.integral==0 && goodsDetail.price>0">
								<span>￥</span>{{goodsDetail.price}}
							</view>
							<view class="increment_info_b_a_e_a" v-if="goodsDetail.price==0 && goodsDetail.integral>0">
								<span>积分</span>{{goodsDetail.integral}}
							</view>
							<view class="increment_info_b_a_e_a" v-if="goodsDetail.price>0 && goodsDetail.integral>0">
								<span>积分</span>{{goodsDetail.integral}}+<span>¥</span>{{goodsDetail.price}}
							</view>
							<view class="increment_info_b_a_e_b">已售{{goodsDetail.order_num}}</view>
						</view>
						<view class="increment_info_b_a_f" v-if="goodsDetail.order_give_integral>0 || goodsDetail.distribution>0">
							<view class="increment_info_b_a_f_a" v-if="goodsDetail.order_give_integral>0">下单预计返<span>{{goodsDetail.order_give_integral}}</span>积分</view>
							<view class="increment_info_b_a_f_a" v-if="goodsDetail.distribution>0">分享预计赚佣金<span>¥{{goodsDetail.distribution}}</span></view>
						</view>
					</view>
				</view>
				<view class="index_b_d_aaaa">
					<view class="index_b_d_aaa">
						<u-tabs
							ref="tabs" 
							:current="current" 
							@click="tabsChange" 
							lineColor="#FF00B4"
							:activeStyle="{
									fontSize: '30rpx',
									fontFamily: 'PingFang SC',
									fontWeight: '800',
									color: '#FF00B4'
									}"
							:inactiveStyle="{
									fontSize: '30rpx',
									fontFamily: 'PingFang SC',
									color: '#fff'
									}"
							itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
							:list="type_list"
							:is-scroll="false"
							>
						</u-tabs>
					</view>
					<view class="increment_info_d">
						<view class="increment_info_d_b" v-if="current==0">
							<u-parse :content="goodsDetail.content" :lazyLoad="true"></u-parse>
						</view>
						<view class="increment_info_d_b" v-if="current==1 && videoList.length>0">
							<view class="video_list_a" @click="video_click(item)" :class="index==0?'video_list_aa':''" v-for="(item, index) in videoList">
								<view v-if="goodsDetail.course_type==1">
									<view class="video_list_a_a">
										<u-icon :name="video_id==item.id?'pause-circle':'play-circle'" :color="video_id==item.id?'#CC8FBD':'#CC8FBD'" size="18"></u-icon>
									</view>
									<view class="video_list_a_b" :class="video_id==item.id?'video_list_a_bb':''">{{item.name}}</view>
									<view class="video_list_a_c" v-if="item.is_charge==1">
										<u-icon name="lock" color="#CC8FBD" size="18"></u-icon>
									</view>
								</view>
								<view v-else>
									<view class="video_list_a_d">{{item.name}}</view>
									<view class="video_list_a_e">上课日期：{{item.start_class_date}}-{{item.end_class_date}}</view>
									<view class="video_list_a_e">上课时间：{{item.class_time}}</view>
								</view>
							</view>
						</view>
						<view class="tutor_e" v-if="current==2">
							<view class="tutor_e_a">
								<view class="tutor_e_a_a">评价(99+)</view>
								<view class="tutor_e_a_b">
									<view class="tutor_e_a_b_a">好评度99.68%</view>
									<view class="tutor_e_a_b_b">
										<u-icon name="arrow-right" color="#D2B7DF" size="12"></u-icon>
									</view>
								</view>
							</view>
							<view class="tutor_e_b">
								<EvaluateList :list="commentList"></EvaluateList>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsDetail.is_pay==1" style="width: 750rpx;height: 160rpx;"></view>
				<view class="service_info" v-if="goodsDetail.is_pay==1">
					<button open-type="share" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="share" color="#000000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">分享</view>
					</button>
					<button open-type="contact" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="kefu-ermai" color="#000000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">客服</view>
					</button>
					<view @click="goPage('/pages/cart/list?current=1')" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="shopping-cart" color="#000000" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">购物车</view>
						<view class="cart_num_a_a">{{cart_num}}</view>
					</view>
					<view class="service_info_b">
						<view class="service_info_b_a" @tap="onAddCart">加入购物车</view>
						<view class="service_info_b_b" @tap="onConfirm">立即购买</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="details-null column-center">
					<image class="img-null" src="/static/goods_null.png"></image>
					<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
import request from '@/common/request.js';
import storage from '@/common/storage.js';
import {
		loadingType,
} from '@/utils/type';
export default {
	data(){
		return {
			showLoading:true,
			current:0,
			isNull: false,
			screenHeight:0,
			CustomBar:this.CustomBar,
			goods_icon1:request.baseUrl_img+'/img/goods_icon1.png',
			goods_icon2:request.baseUrl_img+'/img/goods_icon2.png',
			goods_gengduo:request.baseUrl_img+'/img/goods_gengduo.png',
			gouwuche:request.baseUrl_img+'/img/gouwuche.png',
			min_price:0,
			collect_y:request.baseUrl_img+'/img/collect_y.png',
			collect_w:request.baseUrl_img+'/img/collect_w.png',
			swiperList:[],
			goodsDetail:[],
			videoList:[],
			cart_num:0,
			id:0,
			uid:'',
			distribution_code:'',
			baseUrl_H5:request.baseUrl_H5,
			video_url:'',
			video_id:0,
			type_list:[
				{
					name: '简介'
				},
				{
					name: '目录'
				},
				{
					name: '评价'
				}
			]
		}
	},
	onLoad: function (options) {
		if (!options.id) {
			this.isNull=true;
			return;
		} else {
			this.id =options.id;
			if(options.distribution_code){
				uni.setStorageSync("tj_code", options.distribution_code);
			}
		}
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度
		this.screenHeight = systemInfo.screenHeight-260;
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
		this.distribution_code=storage.currentUser.distribution_code;
		if(this.uid){
			this.getCartNumFun();
		}
		this.getGoodsDetailFun();
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:this.goodsDetail.name,
			path:'/pages/goods/info?id='+this.goodsDetail.id+'&distribution_code='+this.distribution_code,
			imageUrl:this.goodsDetail.image,
			desc:this.goodsDetail.remark,
			content:this.goodsDetail.remark
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:this.goodsDetail.name,
			path:'/pages/goods/info?id='+this.goodsDetail.id+'&distribution_code='+this.distribution_code,
			imageUrl:this.goodsDetail.image,
			desc:this.goodsDetail.remark,
			content:this.goodsDetail.remark
		}
	},
	mounted() {
		
	},
	methods: {
		onConfirm() {
			let goods = [{
				goods_id: this.id
			}];
			const params = {
				goods
			};
			this.showSpec = false;
			uni.navigateTo({
				url: '/pages/confirm_order/confirm_curriculum_order?data=' + encodeURIComponent((JSON.stringify(
					params)))
			})
		},
		onAddCart() {
			const paramsList = {
				goods_num: 1,
				goods_id: this.id,
				uid: this.uid,
				type:2
			}
			let optsList = {
				url: 'c-add',
				method: 'post'
			};
			uni.showLoading({
				title: '加入中...',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 2000
				});
				if (res.data.code == 200) {
					_this.showSpec = false;
					_this.getCartNumFun();
				}
			});
		},
		getCartNumFun(){
			let paramsList = {
				'uid':this.uid,
				'type':2
			}
			let optsList = {
				url: 'c-cart_num',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.cart_num=res.data.data.num;
				}
			});
		},
		video_click(item){
			if(this.goodsDetail.course_type==2){
				return;
			}
			if(item.is_charge==1){
				uni.showToast({
					title:'暂无该课程观看权限',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			this.video_url=item.url;
			this.video_id=item.id;
			this.videoContext = uni.createVideoContext('myVideo', this);
			this.videoContext.play();
		},
		tabsChange(e) {
			this.current = e.index;
		},
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		async getGoodsDetailFun() {
			let paramsList = {
				id: this.id,
				uid:this.uid
			}
			let optsList = {
				url: 'c-getCurriculumDetail',
				method: 'get'
			};
			let _this = this;
			request.httpRequest(optsList, paramsList).then(res => {
				if (res.data.code == 200) {
					let {
						goods_image,
						content,
						video_list
					} = res.data.data;
					_this.swiperList = goods_image;
					let data_list=JSON.parse(JSON.stringify(res.data.data));
					_this.min_price=Number(_this.goodsDetail.min_price);
					_this.goodsDetail =data_list;
					_this.videoList=video_list;
				} else {
					this.isNull = true
				}
				this.showLoading = false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.service_info_a_aa{
		width:20px;
		height:20px;
		margin: auto;
	}
	.service_info_a_b{
		text-align: center;
		font-family: 思源黑体;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.video_list_a{
		width:100%;
		padding:20rpx 0;
		overflow: hidden;
		margin: auto;
		border-top: 1rpx solid #351740;
	}
	.video_list_aa{
		border-top:0;
	}
	.video_list_a_a{
		float: left;
	}
	.video_list_a_b{
		float: left;
		margin-left: 15rpx;
		font-family: 思源黑体;
		font-size: 30rpx;
		line-height: 45rpx;
	}
	.video_list_a_bb{
		color: #CC8FBD;
	}
	.video_list_a_c{
		float: right;
	}
	.video_list_a_d{
		font-family: 思源黑体;
		font-size: 30rpx;
		font-weight:800;
		color: #fff;
	}
	.video_list_a_e{
		font-family: 思源黑体;
		font-size: 24rpx;
		font-weight:400;
		color:#BCA4B6;
		margin-top: 20rpx;
	}
	
	.video_a{
		width: 750rpx;
		height: 420rpx;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.video_a video{
		width: 750rpx;
		height: 420rpx;
	}
	.goods_aa{
		width: 749rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 0 25rpx;
	}
	.goods_aa_a{
		padding: 50rpx 0 30rpx 0;
		overflow: hidden;
	}
	.goods_aa_a_a{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
	}
	.goods_aa_a_a span{
		color: #666666;
	}
	.goods_aa_a_b{
		float: right;
		overflow: hidden;
	}
	.goods_aa_a_b_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		float: left;
	}
	.goods_aa_a_b_b{
		float: left;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
	.goods_aa_b{
		overflow: hidden;
	}
	button::after{
		border: 0;
	}
	button{
		background-color:#FFFFFF;
		padding-left: 0;
		padding-right: 0;
	}
	.cart_num_a{
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(86,124,46,0.1);
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
	}
	.cart_num_a_a{
		width: 54rpx;
		height: 40rpx;
		background:#FF00B4;
		border-radius: 20rpx;
		position: absolute;
		top:-20rpx;
		right:-20rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ffffff;
	}
	.increment_info_a{
		width: 750rpx;
		height: 420rpx;
	}
	.increment_info_b{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 50rpx 0rpx;
		margin: auto;
		padding: 40rpx;
	}
	.increment_info_b_a{
		overflow: hidden;
	}
	.increment_info_b_a_a{
		width: 68rpx;
		height: 50rpx;
		background: #FF00B4;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
		float: left;
	}
	.increment_info_b_a_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 50rpx;
		float: left;
		margin-left: 10rpx;
		width: 470rpx;
	}
	.increment_info_b_a_c{
		padding:10rpx;
		background:#EFECF5;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #62469B;
		margin-left: 15rpx;
	}
	.increment_info_b_a_cc{
		background:#FAF4F8;
		color: #CC8FBD;
	}
	.increment_info_b_a_d{
		float: right;
	}
	.increment_info_b_a_d_a{
		float: left;
	}
	.increment_info_b_a_d_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		line-height: 50rpx;
		float: left;
		margin-left: 15rpx;
	}
	.increment_info_b_a_e{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.increment_info_b_a_e_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size:30rpx;
		color: #FB2B18;
		line-height: 36rpx;
		float: left;
	}
	.increment_info_b_a_e_a span{
		font-size:24rpx;
	}
	.increment_info_b_a_e_b{
		float: right;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #BBBBBB;
		line-height: 36rpx;
	}
	.increment_info_b_a_f{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.increment_info_b_a_f_a{
		float: left;
		margin-right:30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #BBBBBB;
		line-height: 36rpx;
	}
	.increment_info_b_a_f_a span{
		color:#FF6000;
	}
	
	.increment_info_c{
		width: 720rpx;
		height: auto;
		margin: auto;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 25rpx;
	}
	.increment_info_c_a{
		height: 80rpx;
		line-height: 80rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: right;
		padding-right: 50rpx;
		margin-top: 50rpx;
	}
	.increment_info_c_a_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		float: left;
	}
	.increment_info_c_a_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
		margin-left: 25rpx;
		width: 400rpx;
		height: 80rpx;
		overflow: hidden;
	}
	.increment_info_c_a_b_a_a{
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
		overflow: hidden;
	}
	.increment_info_c_a_b_a_a image{
		width: 80rpx;
		height: 80rpx;
	}
	.increment_info_c_a_b_a_b{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
		margin-right: 20rpx;
		line-height: 80rpx;
	}
	.increment_info_c_a_c{
		width: 520rpx;
		height: 80rpx;
		float: left;
		margin-left: 25rpx;
		overflow: hidden;
	}
	.increment_info_c_a_c_a{
		width: 28%;
		float: left;
		margin-right: 20rpx;
	}
	.increment_info_c_a_c_a_a{
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}
	.increment_info_c_a_c_a_b{
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}
	.increment_info_c_a_d{
		width: 120rpx;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
	}
	

	.increment_info_d{
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 40rpx;
	}
	.increment_info_d_b{
		overflow: hidden;
		color:#fff;
	}
	
	.service_info{
		width: 750rpx;
		height: 150rpx;
		background: #FFFFFF;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding: 16rpx 28rpx;
		position:fixed;
		bottom: 0;
	}
	.service_info_a{
		height: 80rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background-position: center 0rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		line-height: 130rpx;
		float: left;
		width: 80rpx;
		text-align: center;
		position: relative;
	}
	.service_info_a_a{
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #E71102, #E71102);
		border-radius: 17rpx;
		position:absolute;
		top:0;
		right: 0;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 34rpx;
	}
	.service_info_aa{
		color: #E71102;
	}
	.service_info_aaa{
		background-size: 45rpx;
	}
	.service_info_b{
		width: 420rpx;
		height: 88rpx;
		background: #FFFFFF;
		border: 2px solid #FF00B4;
		border-radius: 44rpx;
		float: right;
		overflow: hidden;
	}
	.service_info_b_a{
		width: 50%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF00B4;
		text-align: center;
		line-height: 78rpx;
		float: left;
	}
	.service_info_b_b{
		width: 50%;
		height: 88rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		float: left;
		background-color: #FF00B4;
	}
	.details-null {
		padding-top: 140rpx;
		margin-bottom: 100rpx;
	}
	
	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.img-null {
		width: 300rpx;
		height: 300rpx;
	}
	
	.index_b_d_aaa{
		padding:25rpx 0;
		width: 750rpx;
		overflow: hidden;
		border-bottom: 1rpx solid #351740;
	}
	
	.index_b_d_aaaa{
		width: 750rpx;
		overflow: hidden;
		margin-top: 20rpx;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.tutor_e{
		overflow: hidden;
		margin: auto;
	}
	.tutor_e_a{
		overflow: hidden;
	}
	.tutor_e_a_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
	}
	.tutor_e_a_b{
		float: right;
	}
	.tutor_e_a_b_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #D2B7DF;
		line-height: 36rpx;
		float: left;
	}
	.tutor_e_a_b_b{
		float: left;
		margin-top: 5rpx;
	}
</style>